<template>
	<view class="category">
		<canvas canvas-id="canvas1" class="share__canvas canvas1 "></canvas>
		<button type="primary" class="btn" @tap="saveAIshare">保存图片</button>
		<view class="onepix">
			<view data-type="text" class="draw_canvas line" style="">.</view>
			<view class="wbk share__canvas share__canvas1">
				<view class="nbk">
					<view class="img"><image class="draw_canvas imgs" data-type="image" :data-url="cardData.avatar" :src="cardData.avatar"></image></view>
					<view class="service">
						<view class="draw_canvas text" data-type="text" :data-text="cardData.name">{{ cardData.name }}</view>
						<view class="draw_canvas span" data-type="text" :data-text="cardData.corpName+'/'+cardData.position">{{ cardData.corpName }}/{{ cardData.position }}</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view class="draw_canvas" data-type="text" :data-text="'电话:'+ cardData.mobile">电话:{{ cardData.mobile }}</view>
							<view class="draw_canvas" data-type="text" :data-text="'微信:'+ cardData.wechat">微信:{{ cardData.wechat || '无' }}</view>
							<view class="draw_canvas" data-type="text" :data-text="'邮箱'+ cardData.email">邮箱:{{ cardData.email }}</view>
						</view>
						<view class="right">
							<view class="img">
								<image
									class="draw_canvas imgs"
									data-type="image"
									data-url="http://img2.imgtn.bdimg.com/it/u=375170222,4161689974&fm=26&gp=0.jpg"
									src="http://img2.imgtn.bdimg.com/it/u=375170222,4161689974&fm=26&gp=0.jpg"
								></image>
							</view>
						</view>
					</view>
					<view data-type="text" class="draw_canvas line" style="">.</view>
					<view class="foot">
						<view class="draw_canvas" data-type="text" :data-text="'地址'+ cardData.city">地址:{{ cardData.city }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <image :src="imgs" mode=""></image> -->
		<!-- <view class="popup" :class="sharePopup">
			<view class="mask" @click="toggleSpec"></view>
			<view class="layer attr-content">
				<button class="btn" @click="saveAIshare">保存名片海报后分享</button>
			</view>
		</view> -->
	</view>
</template>

<script>
import Wxml2Canvas from 'wxml2canvas'; // 根据具体路径修改，node_modules会被忽略
import request from '@/common/request.js';
export default {
	data() {
		return {
			imgs: '',
			sharePopup: 'none',
			canvas_show: 'none',
			cid: '',
			cardData: {}
		};
	},
	onLoad(val) {
		this.cid = val.cid;
		this.getUserCardDetail()
	},
	mounted() {
		
	},
	methods: {
		toggleSpec() {
			if (this.sharePopup === 'show') {
				this.sharePopup = 'hide';
				setTimeout(() => {
					this.sharePopup = 'none';
				}, 250);
			} else if (this.sharePopup === 'none') {
				this.sharePopup = 'show';
			}
		},
		saveAIshare() {
			wx.saveImageToPhotosAlbum({
				filePath: this.imgs,
				success(res) {
					wx.showToast({
						title: '保存成功',
						icon: 'success'
					});
				},
				fail() {
					wx.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			});
		},
		fdrawImage1() {
			let self = this;
			self.canvas_show = 'show';
			this.drawImage1 = new Wxml2Canvas({
				width: 375, // 宽， 以iphone6为基准，传具体数值，其他机型自动适配
				height: 850, // 高
				element: 'canvas1',
				background: '#ffffff',
				progress(percent) {},
				finish(url) {
					console.log('finish=', url);
					self.canvas_show = 'none';
					self.imgs = url;
				},
				error(res) {
					console.log('error=', res);
				}
			});
		
			let data = {
				list: [
					{
						type: 'wxml',
						class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素
						limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
						x: 0,
						y: 0
					}
				]
			};
			this.drawImage1.draw(data);
		},
		getUserCardDetail() {
			//获取用户的名片详细信息
			request.request(
				'getUserCardDetail',
				{
					cid: this.cid
				},
				res => {
					console.log('getUserCardDetail',res);
					this.cardData = res.data.data;
					this.fdrawImage1();
				}
			);
		}
	}
};
</script>

<style lang="less">
.category{
	padding: 45rpx 27rpx 30rpx;
	background: #f0f0f0;
	.wbk {
		width: 700rpx;
		height: 1150rpx;
		margin: 0 41rpx;
		padding: 40rpx 0;
		background: #fff;
		border: 1px solid #ddd;
		margin: 34rpx;
	.nbk {
		background-color: #FFFFFF;
		.img {
			// margin: 17 * 75/42rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			width: 584rpx;
			height: 256 * 75/42rpx;
			overflow: hidden;
			.imgs {
				width: 100%;
				height: 100%;
			}
		}
		.service {
			text-align: center;
			.text {
				display: block;
				color: #333;
				font-size: 28 * 75/42rpx;
			}
			.span {
				color: #666;
				font-size: 16 * 75/42rpx;
			}
		}
		.line {
			margin: 0 auto;
			background: #dadada;
			height: 1px;
			overflow: hidden;
		}
		.bottom {
			margin: 17 * 75/42rpx;
			height: 184 * 75/42rpx;
			position: relative;
			border-bottom: 1px solid #eaeaea;
			.left {
				width: 50%;
				color: #999;
				font-size: 16 * 75/42rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				text {
					display: block;
				}
			}
			.right {
				width: 50%;
				position: absolute;
				right: 0;
				margin-top: 15 * 75/42rpx;
				.img {
					width: 142 * 75/42rpx;
					height: 142 * 75/42rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.foot {
			color: #999;
			font-size: 16 * 75/42rpx;
			padding: 17 * 75/42rpx;
		}
	}
}
}
.btn {
	width: 100%;
	height: 82rpx;
	border-radius: 7px;
	font-size: 43rpx;
	font-weight: 500;
	line-height: 82rpx;
	text-align: center;
	margin-top: 40rpx;
}

// ***************************************
.show {
	display: block;
}
.none {
	display: none;
}
.canvas_show {
	width: 1rpx;
	width: 1rpx;
	overflow: hidden;
	z-index: -10000;
	position: absolute;
}
.onepix {
	width: 1rpx;
	height: 1rpx;
	overflow: hidden;
	z-index: -10000;
	position: absolute;
}
.share__title {
	width: 100%;
	margin-left: 80rpx;
	margin-bottom: 40rpx;
}

.share__canvas {
	width: 700rpx;
	height: 1150rpx;
	background: #ffffff;
	margin-bottom: 40rpx;
}
.share__canvas1 {
	// position: relative;
}
.share__canvas1-text {
	color: #000000;
}

.share__canvas1-text-2 {
	color: #ff0000;
	font-size: 36rpx;
	margin-left: 20rpx;
	margin-top: 20rpx;
}
.share__canvas1-text-3 {
	color: #00ff00;
	padding-left: 40rpx;
	padding-top: 20rpx;
}
.share__canvas1-text-4 {
	color: #0000ff;
	margin-left: 20rpx;
	margin-top: 20rpx;
	width: 600rpx;
	text-align: center;
	background: rgba(255, 0, 0, 0.4);
	padding: 20rpx;
}

.share__canvas1-text-5 {
	color: #0000ff;
	margin-left: 20rpx;
	margin-top: 20rpx;
	width: 600rpx;
	background: rgba(255, 0, 0, 0.4);
	padding: 20rpx;
}

.share__canvas2 {
	position: relative;
}
.share__canvas2-image {
	width: 200rpx;
	height: 120rpx;
	border: 2px solid #ff0000;
	margin: 10rpx 20rpx;
	box-shadow: 20rpx 20rpx 10rpx #cccccc;
}
.share__canvas2-image-2 {
	width: 120rpx;
	height: 120rpx;
	border: 2px solid #ff0000;
	margin: 10rpx 20rpx;
	box-shadow: 20rpx 20rpx 10rpx #cccccc;
	border-radius: 100%;
}

.share__canvas2-image-3 {
	width: 200rpx;
	height: 120rpx;
	border: 2px solid #ff0000;
	margin: 10rpx 20rpx;
	background-size: 200rpx 120rpx;
}

.share__canvas2-image-4 {
	width: 200rpx;
	height: 60rpx;
	position: absolute;
	right: 20rpx;
	top: 100rpx;
	background-size: 200rpx 60rpx;
	background-image: url();
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;
		.btn {
			height: 82rpx;
			line-height: 82rpx;
			border-radius: 100rpx;
			/* background: $uni-color-primary; */
			/* font-size: $font-base + 2rpx; */
			background: linear-gradient(to right, #ff8256, #f34644) !important;
			color: #fff;
			margin: 30rpx auto 20rpx;
			font-size: 38rpx;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}
</style>
